<script setup>
import { ref, computed } from 'vue'
import { useCommonStore } from '@/stores'

const gameList = computed(() => useCommonStore().gameList)
const handleClick = ({ item, keyPath }) => {
  const { switchGameArea } = useCommonStore()
  const { originItemValue } = item
  gameList.value.forEach((item) => {
    if (item.key === keyPath[0]) {
      switchGameArea(
        {
          key: item.key,
          label: item.label,
        },
        'game',
      )
    }
  })
  switchGameArea(
    {
      key: originItemValue.key,
      label: originItemValue.label,
    },
    'area',
  )
}
</script>
<template>
  <a-menu mode="inline" :items="gameList" @click="handleClick" />
</template>
<style lang="scss" scoped>
:deep(.ant-menu-submenu-open > .ant-menu-submenu-title) {
  color: #fff;
  background-color: #243139 !important;
}
</style>
